<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 导入vue.js -->
    <script src="vue.js"></script>
    <!-- 导入elementui的css及js -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <script src="../plugins/elementui/index.js"></script>


</head>
<body>

    <div id="app">

        <el-button type="text" @click="dialogFormVisible = true">增加</el-button>

        <el-dialog title="增加" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="活动名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="活动区域" :label-width="formLabelWidth">
                    <el-select v-model="form.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="add()">确 定</el-button>
            </div>
        </el-dialog>
    </div>

</body>
<script>
    new Vue({
        el : "#app",
        data() {
            return {
                dialogFormVisible: false,
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '120px'
            };
        },
        methods: {
            add(){
                console.log(this.form);
                this.$message({
                    message: '增加成功',
                    type: 'success'
                });
                this.dialogFormVisible = false;
                this.form = {};
            }
        }
    });
</script>

</html>